import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { useRef } from 'react';

/**
 *
 * @param props 提示词节点
 * @returns
 */
const HttpNode: React.ComponentType<NodeSetting.Setting<NodeSetting.HttpNode>> = (props) => {
  const formRef = useRef();
  const onFormFinish = (formData: Record<string, any>) => {
    const param: NodeSetting.HttpNode = formData as NodeSetting.HttpNode
    props?.updateSetting!({ url: param.url, method: param.method, body: param.body })
    props.messageTip('暂存成功', 'success')
  }
  // 自动存放值
  const onChange = async () => {
    const values = await ((formRef.current) as any).getFieldsValue();
    const param: NodeSetting.HttpNode = values as NodeSetting.HttpNode
    props?.updateSetting!({ url: param.url, method: param.method, body: param.body })
  }
  return (<div>
    <ProForm
      formRef={formRef}
      onFinish={async (formData) => onFormFinish(formData)}
      onChange={onChange}
      initialValues={props.setting}
    >
      <ProFormText name="url" label="http的url" />
      <ProFormSelect name="method" label="方法" options={[
        { label: "GET", value: "get" },
        { label: "POST", value: "post" },
      ]} />
      <ProFormText name="body" label="参数" />
    </ProForm>
  </div>)
}
export default HttpNode;
